<template>
        <div class="header-view-total">
                    <div class="item">
                        <h5>总面积(亩)</h5>
                        <p>
                            <count-up style="font-size: 24px;" :startVal="0" :endVal="farmcount.farmLandTotal" :decimalPlaces="1" :duration="2" />
                        </p>
                    </div>
                    <div class="item">
                        <h5>地块数</h5>
                        <p> <count-up style="font-size: 24px;" :startVal="0" :endVal="farmcount.farmLandCount"  :duration="2" /></p>
                    </div>
        </div>
    </template>
    
    <script setup>
    import {ref,onMounted} from "vue"
    import CountUp from 'vue-countup-v3'
    const props = defineProps({
      farmcount:{
            type:Object,
            default:{farmLandTotal:0,farmLandCount:0}
        }
    })

    </script>
  
    <style lang="scss" scoped>
      .header-view-total{
            display: flex;
            background: rgba(0, 173, 110,0.1);            
            border-radius: 2px;
            margin: 10px 10px 5px 10px;
            margin-top: 0;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            padding: 15px 10px 10px 10px;
            .item{
                flex: 1;
                text-align: center;
                h5{
                    font-size: 14px;
                    font-weight: 500;
                    color: #666666;
                    position: relative;
                   
                }
                h5::after{
                    content: '';
                    background-image: url(@/assets/ld2.png);
                    background-position: center;
                    background-size: cover;
                    position: absolute;
                    height:4px;
                    width:60px;
                    left:50%;
                    margin-left:-30px;
                    bottom:-5px;
                }
                p{
                    font-size: 24px;
                    font-weight: 600;
                    color: #333333;
                    padding: 10px 0 5px 0;
                }
            }
      }
    </style>